<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" >
      <el-form-item label="商品分类" prop="catId">
        <treeselect style="width: 200px" v-model="queryParams.catId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
                    placeholder="选择商品分类"/>
      </el-form-item>
      <el-form-item label="名称" prop="goodsName">
        <el-input v-model="queryParams.goodsName" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['jky:goods:create']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                   v-hasPermi="['jky:goods:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column label="商品编码" align="center" prop="goodsCode" />
      <el-table-column label="商品图片" align="center" prop="tmpImg" >
        <template v-slot="scope">
          <image-preview  :src="scope.row.img" :width="'100px'"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center" prop="goodsName" />
      <el-table-column label="价格" align="center" prop="price" >
        <template v-slot="scope">
          {{'￥' + scope.row.price / 100 }}
        </template>
      </el-table-column>

      <el-table-column label="是否审核通过" align="center" prop="passedOrNot">
        <template v-slot="scope">
          {{scope.row.passedOrNot?'已通过':'未通过'}}
        </template>
      </el-table-column>
      <el-table-column label="是否上/下架" align="center" prop="isShow">
        <template v-slot="scope">
          <el-button size="small" type="danger" v-if="scope.row.isShow === 'Y'" @click="stateHandle(scope.row,'isShow','N')">下架</el-button>
          <el-button size="small" type="success" v-else @click="stateHandle(scope.row,'isShow','Y')">上架</el-button>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center" prop="isTop" >
        <template v-slot="scope">
          <el-button size="small" type="danger" v-if="scope.row.isTop === 'Y'" @click="stateHandle(scope.row,'isTop','N')">不置顶</el-button>
          <el-button size="small" type="success" v-else @click="stateHandle(scope.row,'isTop','Y')">置顶</el-button>
        </template>
      </el-table-column>
      <el-table-column label="是否特价" align="center" prop="isSale" >
        <template v-slot="scope">
          <el-button size="small" type="danger" v-if="scope.row.isSale === 'Y'" @click="stateHandle(scope.row,'isSale','N')">否</el-button>
          <el-button size="small" type="success" v-else @click="stateHandle(scope.row,'isSale','Y')">是</el-button>
        </template>
      </el-table-column>
      <el-table-column label="实销量" align="center" prop="salesVolume" />
      <el-table-column label="商品分类" align="center" prop="catName" />
      <el-table-column label="排序" align="center" prop="sort">
        <template v-slot="scope">
          <el-input style="width: 50px" @keydown.enter.native="sortHandle(scope.row)" v-model="scope.row.sort"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['jky:goods:update']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['jky:goods:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import { createGoods, updateGoods,updateGoodsState, deleteGoods, getGoods, getGoodsPage, exportGoodsExcel } from "@/api/supplier/goods";
import Editor from '@/components/Editor';
import ImagePreview from "@/components/ImagePreview";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getGoodsCatList} from "@/api/supplier/goodsCat";
export default {
  name: "Goods",
  components: {
    Editor,
    ImagePreview,
    Treeselect
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 商品列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        catId: null,
        goodsName: null,
        goodsCode: null,
        img: null,
        tmpImg: null,
        video: null,
        videoUrl: null,
        description: null,
        content: null,
        brandId: null,
        isShow: null,
        isTop: null,
        isSale: null,
        isDiscount: null,
        sort: null,
        clicknum: null,
        oldPrice: null,
        costPrice: null,
        price: null,
        profitRatio: null,
        commissionRatio: null,
        postage: null,
        inventory: null,
        givePoint: null,
        deductionPoint: null,
        isSku: null,
        skuStr: null,
        salesVolume: null,
        virtualVolume: null,
        createtime: [],
        isDelete: null,
        type: null,
        bigPrice: null,
        proffer: null,
        fhSmall: null,
        sxSmall: null,
        supplierId: null,
        banNum: null,
        inteBili: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        catId: [{ required: true, message: "商品分类ID不能为空", trigger: "blur" }],
        goodsName: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        isShow: [{ required: true, message: "是否显示 Y显示 N不显示不能为空", trigger: "blur" }],
        isTop: [{ required: true, message: "是否推荐/置顶 Y是 N否不能为空", trigger: "blur" }],
        isSale: [{ required: true, message: "是否为特价商品 Y是 N否不能为空", trigger: "blur" }],
        isDiscount: [{ required: true, message: "是否开启会员等级折扣 Y是 N否不能为空", trigger: "blur" }],
        isSku: [{ required: true, message: "是否开启SKU属性配置不能为空", trigger: "blur" }],
        salesVolume: [{ required: true, message: "销售量不能为空", trigger: "blur" }],
        createtime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
        isDelete: [{ required: true, message: "是否删除 Y是 N否不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型1自营商城2积分商城不能为空", trigger: "change" }],
        proffer: [{ required: true, message: "提供不能为空", trigger: "blur" }],
        supplierId: [{ required: true, message: "供应商组ID 0代表无不能为空", trigger: "blur" }],
        banNum: [{ required: true, message: "寄售限制数量不能为空", trigger: "blur" }],
      },
      menuOptions: [],
    };
  },
  created() {
    this.getList();
    this.getTreeSelect()
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.catId,
        label: node.catName,
        children: node.children
      };
    },
    getTreeSelect() {
      getGoodsCatList().then(response => {
        this.menuOptions = [];
        this.menuOptions = this.handleTree(response.data, "catId");
      });
    },
    sortHandle(row) {
      console.log(row)
      updateGoodsState({goodsId: row.goodsId,sort: row.sort}).then(res => {
        this.$modal.msgSuccess('排序修改成功');
        this.open = false;
        this.getList();
      })
    },
    stateHandle(row,type,state) {
      const params = {
        goodsId: row.goodsId
      }
      params[type] = state
      updateGoodsState(params).then(res => {
        this.$modal.msgSuccess("成功");
        this.open = false;
        this.getList();
      })
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getGoodsPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        goodsId: undefined,
        catId: undefined,
        goodsName: undefined,
        goodsCode: undefined,
        img: undefined,
        tmpImg: undefined,
        video: undefined,
        videoUrl: undefined,
        description: undefined,
        content: undefined,
        brandId: undefined,
        isShow: undefined,
        isTop: undefined,
        isSale: undefined,
        isDiscount: undefined,
        sort: undefined,
        clicknum: undefined,
        oldPrice: undefined,
        costPrice: undefined,
        price: undefined,
        profitRatio: undefined,
        commissionRatio: undefined,
        postage: undefined,
        inventory: undefined,
        givePoint: undefined,
        deductionPoint: undefined,
        isSku: undefined,
        skuStr: undefined,
        salesVolume: undefined,
        virtualVolume: undefined,
        createtime: undefined,
        isDelete: undefined,
        type: undefined,
        bigPrice: undefined,
        proffer: undefined,
        fhSmall: undefined,
        sxSmall: undefined,
        supplierId: undefined,
        banNum: undefined,
        inteBili: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({ name: 'GoodsAdd'})
      // this.reset();
      // this.open = true;
      // this.title = "添加商品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({ name: 'GoodsUpdate',query:{id:row.goodsId}})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const goodsId = row.goodsId;
      this.$modal.confirm('是否确认删除商品编号为"' + goodsId + '"的数据项?').then(function() {
          return deleteGoods(goodsId);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有商品数据项?').then(() => {
          this.exportLoading = true;
          return exportGoodsExcel(params);
        }).then(response => {
          this.$download.excel(response, '商品.xls');
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
